// 仪表盘组件（对应路由里的 dashboard 模块）
export var name = "dashboard";

/**
 * 渲染仪表盘的 HTML 结构
 * @returns {string} 包含统计卡片的页面结构
 */
export function render() {
    return `
        <style>
            /* 容器基础样式 */
            .dashboard-container {
                padding: 20px;
                background: #fff;
                min-height: calc(100vh - 60px);
            }

            /* 标题样式 */
            .dashboard-title {
                font-size: 24px;
                font-weight: 600;
                color: #333;
                margin-bottom: 24px;
                border-left: 4px solid #4361ee;
                padding-left: 12px;
            }

            /* 统计卡片容器：横向布局 */
            .stats-cards {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
                gap: 20px;
            }

            /* 单个统计卡片样式 */
            .stat-card {
                background: #f8f9fa;
                border-radius: 8px;
                padding: 20px;
                box-shadow: 0 2px 6px rgba(0,0,0,0.05);
                transition: transform 0.2s ease;
            }

            .stat-card:hover {
                transform: translateY(-3px);
            }

            /* 卡片标题 */
            .stat-title {
                font-size: 14px;
                color: #6c757d;
                margin-bottom: 8px;
            }

            /* 核心数据 */
            .stat-value {
                font-size: 20px;
                font-weight: 500;
                color: #212529;
                margin-bottom: 4px;
            }

            /* 变化趋势 */
            .stat-change {
                font-size: 12px;
                color: #28a745; /* 上升默认绿色 */
                display: flex;
                align-items: center;
                gap: 4px;
            }

            /* 下降趋势样式（可根据实际数据动态切换） */
            .stat-change.down {
                color: #dc3545;
            }
        </style>

        <div class="dashboard-container">
            <h1 class="dashboard-title">后台管理系统</h1>
            
            <div class="stats-cards">
                <div class="stat-card">
                    <div class="stat-title">总销售额</div>
                    <div class="stat-value">¥128,500</div>
                    <div class="stat-change">+12.5% <i class="bi bi-arrow-up"></i></div>
                </div>
                <div class="stat-card">
                    <div class="stat-title">订单数量</div>
                    <div class="stat-value">856</div>
                    <div class="stat-change">+8.2% <i class="bi bi-arrow-up"></i></div>
                </div>
                <div class="stat-card">
                    <div class="stat-title">用户总数</div>
                    <div class="stat-value">12,500</div>
                    <div class="stat-change">+5.3% <i class="bi bi-arrow-up"></i></div>
                </div>
                <div class="stat-card">
                    <div class="stat-title">今日活跃</div>
                    <div class="stat-value">3,241</div>
                    <div class="stat-change">+3.1% <i class="bi bi-arrow-up"></i></div>
                </div>
            </div>
        </div>
    `;
}

/**
 * 组件渲染完成后执行的初始化逻辑
 * 可扩展：图表初始化 / 异步数据加载 / 事件绑定等
 */
export function afterRender() {
    // 1. 基础日志（可删除，仅作示例）
    console.log("Dashboard component rendered - 可在此处初始化图表/异步请求");

    // 2. 扩展示例：模拟异步加载真实数据（可根据需求对接接口）
    // fetch('/api/dashboard/stats')
    //   .then(res => res.json())
    //   .then(data => {
    //       updateStats(data); // 更新统计卡片数据
    //       initCharts(data);  // 初始化图表
    //   });

    // 3. 扩展示例：初始化 ECharts（需提前引入 ECharts）
    // const chartDom = document.createElement('div');
    // chartDom.style.height = '300px';
    // document.querySelector('.dashboard-container').appendChild(chartDom);
    // const myChart = echarts.init(chartDom);
    // myChart.setOption({ /* 图表配置 */ });
}

/**
 * 【可选工具函数】更新统计卡片数据（需与 render 中的结构对应）
 * @param {object} data - 接口返回的统计数据 { sales, orders, users, active }
 */
function updateStats(data) {
    document.querySelector('.stat-value:nth-of-type(1)').textContent = `¥${data.sales}`;
    document.querySelector('.stat-value:nth-of-type(2)').textContent = data.orders;
    document.querySelector('.stat-value:nth-of-type(3)').textContent = data.users;
    document.querySelector('.stat-value:nth-of-type(4)').textContent = data.active;
}